<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">

<head th:replace="base :: head(~{::title})">
  <title>MySQL Todo Sample</title>
</head>

<body th:replace="base :: body(~{::h1}, ~{::section})">
  <h1>ToDo List</h1>

  <section>
    <div class="todoList">
      <form class="form-horizontal" role="form" th:action="@{/update}" th:object="${items}" method="POST">
        <table class="table table-bordered table-striped" id="todoItems">
          <thead>
            <tr>
              <th>Name</th>
              <th>Category</th>
              <th>Complete</th>
            </tr>
          </thead>
          <tbody>
            <tr th:each="item,i : *{todoList}" th:class="${item.complete}? active : warning">
              <input type="hidden" th:field="*{todoList[__${i.index}__].id}" />
              <td th:text="${item.name}">Item_name</td><input type="hidden"
                th:field="*{todoList[__${i.index}__].name}" />
              <td th:text="${item.category}">item_category</td><input type="hidden"
                th:field="*{todoList[__${i.index}__].category}" />
              <td><input type="checkbox" th:checked="${item.complete} == true"
                  th:field="*{todoList[__${i.index}__].complete}" /></td>
            </tr>
          </tbody>
        </table>
        <!-- Update Button -->
        <button type="submit" class="btn btn-primary">Update Tasks</button>
      </form>
    </div>

    <hr />

    <!-- Item Input Form -->
    <div class="todoForm">
      <form class="form-horizontal" role="form" th:action="@{/add}" th:object="${newitem}" method="POST">
        <div class="form-group">
          <label for="inputItemName" class="col-sm-2">Task Name</label>
          <div class="col-sm-10">
            <input type="text" th:field="*{name}" class="form-control" id="inputItemName" placeholder="Enter name" />
          </div>
        </div>

        <div class="form-group">
          <label for="inputItemCategory" class="col-sm-2">Task Category</label>
          <div class="col-sm-10">
            <input type="text" th:field="*{category}" class="form-control" id="inputItemCategory"
              placeholder="Enter category" />
          </div>
        </div>

        <button type="submit" class="btn btn-primary">Add Task</button>

      </form>
    </div>
  </section>

</body>

</html>